import React from 'react';
import { Table } from 'antd';
import styles from './index.less';

class page extends React.Component {
  componentDidMount() {
    window.onresize = () => this.setState({});
  }

  componentWillUnmount() {
    window.onresize = null;
  }

  // 获取表格主体高度(不包含列头th)
  funcGetHeight = () => {
    let height = 120; // 页眉高度(64 + 56)

    // 表格整体
    let dom = document.getElementsByClassName('antd-pro-components-standard-table-index-standardTable');
    if (!dom.length) return;
    height += dom[0].offsetTop;

    // 表格列头(th)
    dom = document.getElementsByClassName('ant-table-header');
    if (!dom.length) return;
    height += dom[0].clientHeight;

    height += 2; // 算上边框线

    const { props } = this;
    const {
      data: { pagination },
      footer,
    } = props;

    if (pagination) height += 41; // 表格底部的分页器
    if (footer) height += 56; // 表格底部的扩展栏

    return height;
  };

  render() {
    const { props } = this;
    const {
      data: { list, pagination },
      loading,
      columns,
      selectedRows,
      addNum,
      fixedNum,
      size,
      scrollX,
      footer,
      bordered,
    } = props;
    const rowKey = props.rowKey || 'id';

    const show = !window.isPad && !window.isMobile;
    const paginationProps = pagination === false ? false : {
      showSizeChanger: show,
      showQuickJumper: show,
      pageSizeOptions: ['20', '50', '100', '200'],
      showTotal: total => '共 ' + total + ' 条记录',
      ...pagination,
    };

    // 处理表格行选择
    let selectedRowKeys = [];
    let rowSelection = null;
    if (selectedRows) {
      selectedRowKeys = selectedRows.map((item) => {
        return item[rowKey];
      });

      rowSelection = {
        selectedRowKeys,
        onChange: (_, rows) => {
          const { onSelectRow } = this.props;
          if (onSelectRow) onSelectRow(rows);
        },
        getCheckboxProps: record => ({
          disabled: record.disabled,
        }),
      };
    }

    // 添加记录序号
    const newColumns = [...columns];
    if (addNum !== false && addNum !== 'false') {
      if (columns[0].dataIndex !== 'id_prikey') {
        // 只添加一次
        newColumns.unshift({
          title: '序号',
          dataIndex: 'id_prikey',
          width: 62,
          fixed: fixedNum,
          render: text => <span style={{ color: 'darkgray' }}>{text}</span>,
        });
      }
      for (let i = 0; i < list.length; i += 1) {
        list[i].id_prikey = i + 1;
      }
    }

    return (
      <div className={styles.standardTable}>
        <Table
          loading={loading}
          rowKey={rowKey}
          rowSelection={rowSelection}
          dataSource={list}
          columns={newColumns}
          pagination={paginationProps}
          onChange={(pagination) => {
            const { onChange } = this.props;
            if (onChange) onChange(pagination); // 表格换页
          }}
          size={size || 'small'}
          scroll={{
            x: window.innerWidth <= scrollX ? scrollX : false,
            // 表格高度自适应(局部滚动), 但是手机端例外
            y: window.isMobile ? false : 'calc(100vh - ' + this.funcGetHeight() + 'px)',
          }}
          bordered={bordered || true}
          footer={footer ? () => footer : null}
        />
      </div>
    );
  }
}

export default page;
